<template>
	<view :style="{'marginTop':topHeight+'px'}" class="content" style="box-sizing: border-box">
		<!-- 内容展示 scroll -->
		<scroll-view>
			<view class="flex-row flex-jus-cen" style="font-size: 24rpx;color: var(--grey-text);">
				此客户与以下销售产生的订台关联数据</view>
			<view class="content-body-title" style="margin-top: 30rpx;">
				<view class="flex-row flex-jus-bet flex-ali-cen">
					<view class="content-title" style="width: 40%;">销售名称</view>
					<view class="content-title" style="width: 30%;">所属部门</view>
					<view class="content-title flex-row flex-jus-end" style="width: 30%">订台次数/金额</view>
				</view>
			</view>
			<view class="content-body" style="margin-top: 30rpx;" v-for="(item,index) in salesList" :key=index
				v-if="salesList.length>0">
				<view class="flex-row flex-jus-bet flex-ali-cen">
					<view class="content-value" style="width: 40%;">{{item.salesman_name}}</view>
					<view class="content-value" style="width: 30%;">{{item.depart_name}}</view>
					<view class="content-value flex-row flex-jus-end" style="width: 30%;">{{item.count}}次 / {{formatNumber(item.money) || 0}}</view>
				</view>
			</view>
			<view v-if="salesList.length ==0 && requestLoading == 2" style="font-size: 28rpx;color: var(--grey-text);text-align: center;padding-top: 400rpx;">
				该客户暂无销售关联数据~
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			topHeight: {
				type: [String, Number],
				require: true,
				default: 0
			},
			customId: {
				type: [String, Number],
				require: true,
				default: 0
			}
		},
		data() {
			return {
				requestLoading: 1,
				salesList: [],
        shopIndex: this.$commonJs.getChooseShopIndex(),
        shopList: this.$commonJs.getShopList(),
			}
		},
		mounted() {
			this.getSalesList()
		},
		methods: {
			getSalesList() {
        const self = this
        const params = {
          id: self.customId
        }
        self.$commonJs.queryCache('/app/admin/relatedSales', params, {
          before() {
            self.requestLoading = 1
          },
          success(res) {
            try {
              const {
                code,
                data,
                msg,
                server_ip
              } = res
              	self.salesList = data
            } catch (error) {
              //TODO handle the exception
              self.$commonJs.showMessage(error)
            }
          },
          fail(err) {
            self.$commonJs.logger.debug(err, 'error')
          },
          complete(){
            self.requestLoading = 2
          }
        }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
			},
			/**
			 * 格式化处理
			 * @param money
			 * @returns {string|*}
			 */
			formatNumber(money) {
				// 判断是否为整数（即小数部分是否为 0）
				if (money % 1 === 0) {
					return Number(money).toString()
				} else {
					return Number(money).toFixed(2)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-body {
		background: var(--bg-center-color);
		height: auto;
		border-radius: 10rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.content-body-title {
		height: auto;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.content-title-name {
		font-size: 28rpx;
		color: var(--white-text);
		font-weight: 600;
	}

	.content-title {
		font-size: 24rpx;
		color: var(--grey-text);
	}

	.content-value {
		font-size: 26rpx;
		color: var(--white-text);
	}

	.content-from {
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		font-size: 24rpx;
		color: var(--grey-text);
		flex: 1;
	}

	.content-from-active {
		background: #5697D7;
		color: #fff;
		border-radius: 10rpx;
	}

	.flex {
		display: flex;
		align-items: center;

		&-row {
			flex-direction: row;
		}

		&-wrap {
			flex-wrap: wrap;
		}

		&-nowrap {
			flex-wrap: nowrap;
		}

		&-col {
			flex-direction: column;
		}

		&-1 {
			flex: 1;
		}

		&-shrink {
			flex-shrink: 0;
		}

		&-jus-cen {
			justify-content: center;
		}

		&-jus-bet {
			justify-content: space-between;
		}

		&-jus-end {
			justify-content: flex-end;
		}

		&-jus-start {
			justify-content: flex-start;
		}

		&-jus-aro {
			justify-content: space-around;
		}

		&-jus-eve {
			justify-content: space-evenly;
		}

		&-jus-self-end {
			justify-self: end;
		}

		&-ali-cen {
			align-items: center;
		}

		&-ali-sta {
			align-items: flex-start;
		}

		&-ali-end {
			align-items: flex-end;
		}
	}

	.content {
		padding: 30rpx 30rpx 60rpx 30rpx;
		position: absolute;
		width: 100vw;
	}
</style>